<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echartsJs/echarts.js"></script>
    <style>
        .box {
            width: 600px;
            height: 400px;
            display: block;
            border: 1px solid #999;
        }
    </style>
</head>

<body>
    <div class="box" id="box1"></div>
    <div class="box" id="box2"></div>
    <script>

        //第一个柱状图
        let chartDom = document.getElementById("box1");
        let myChart = echarts.init(chartDom);
        let option = {
            legend: {},
            tooltip: {},
            dataset: {
                // dimensions: [定义x轴类目轴种类的划分,需要指定柱状图展示的顺序、需要注意的是如果key值不是数值，可以省略该配置，如果key值是数值，不要省略该配置],
                dimensions: ['product', '2015', '2016', '2017'],
                source: [
                    { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
                    { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
                    { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
                    { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
                ]
            },
            xAxis: { type: 'category' },
            yAxis: {},
            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        };
        myChart.setOption(option);


        let chartDom2 = document.getElementById("box2");
        let myChart2 = echarts.init(chartDom2);
        let option2 = {
            legend: {},
            tooltip: {},
            dataset: {
                
                // dimensions: ['name', '袜子', '裤子', '裙子','外套'],
                source: [
                    {
                        name:"星期一",'袜子':56,'裤子':100,'裙子':98,'外套':100
                    },
                    {
                        name:"星期二",'袜子':56,'裤子':100,'裙子':98,'外套':100
                    },
                    {
                        name:"星期三",'袜子':56,'裤子':100,'裙子':98,'外套':100
                    },
                    {
                        name:"星期四",'袜子':56,'裤子':100,'裙子':98,'外套':100
                    }
                ]
            },
            xAxis: { type: 'category' },
            yAxis: {},
            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' },{ type: 'bar' }]
        };
        myChart2.setOption(option2);




    </script>
</body>

</html>